<template>
  <div class="dashboard-editor-container">

    <panel-group v-has-role="['admin']"/>
    <order-group v-has-role="['admin']"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" v-has-role="['admin']">
      <line-chart :chart-data="lineChartData"/>
    </el-row>
    <el-row  v-has-role="['shop']" style="text-align: center">
      <div style="width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 35px;">
        果舒达商户后台管理
        <div style="display: block;font-size: 24px;margin-top: 40px">邀请骑手邀请码：{{inviteCode}}</div>
      </div>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import OrderGroup from './dashboard/OrderGroup'
  import LineChart from './dashboard/LineChart'
  import {statifyOrderLine} from "@/api/system/orders"
  import {mapGetters} from "vuex";

  const lineChartData = {
    newVisitis: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130],
      days: ['12', '12', '12', '12', '12', '12']
    }
  }

  export default {
    name: 'Index',
    components: {
      OrderGroup,
      PanelGroup,
      LineChart,
    },
    computed: {
      ...mapGetters([
        'inviteCode'
      ])
    },
    data() {
      return {
        lineChartData: lineChartData.newVisitis
      }
    },
    created() {
      statifyOrderLine().then(response => {
        console.log(response.data)
        this.lineChartData = response.data
      })
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
